<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="js/swiper-4.2.6.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/swiper-4.2.6.min.css"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/font.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/ui.css">
    <title></title>
    <!-- 产品详情 -->
    <style>
    </style>
</head>
<body>
<div class="scroll-content2 product-detail" style="overflow:auto;background: #F5F5F5;">
    <div class="top-public">
        <span class="public-center">产品详情</span>
        <img id="img" src="images/left_icon.png" alt="" class="public-left">
    </div>
    <div class="top-title">服务内容</div>
    <div class="content">
        <div class="content-list">
            <span id="imgImg" style="display: none"></span>
            <p id="goods_name" class="list-title">
                <!--展示类网站（PC端）-->
            </p>
            <ul id="neiyong">
                <!--<li>绑定外部域名1个</li>-->
                <!--<li>同时承载链接数 50 个 IP</li>-->
                <!--<li>资源库空间100M</li>-->
                <!--<li>数据库空间不限</li>-->
                <!--<li>自定义网站栏目10个</li>-->
                <!--<li>自定义模块数量 200个</li>-->
                <!--<li>文章数量 100篇</li>-->
                <!--<li>产品数量 100个</li>-->
                <!--<li>图册数量 20个</li>-->
                <!--<li>在线投票主题 1个</li>-->
                <!--<li>在线表单数量 1个</li>-->
                <!--<li>在线表单提交数量 1000个</li>-->
                <!--<li>留言数量 1000条</li>-->
                <!--<li>会员系统 1000个</li>-->
                <!--<li>文件数量 1000个</li>-->
            </ul>
            <div id="spec" class="choice-year">
                <!--<div class="choice-btn active" onclick="xz(this)">-->
                <!--<span style="display: none">id</span>-->
                <!--<span>一年</span>-->
                <!--<span class="price">10000元</span>-->
                <!--</div>-->
                <!--<div class="choice-btn" onclick="xz(this)">-->
                <!--<span>三年</span>-->
                <!--<span class="price">10000元</span>-->
                <!--</div>-->
                <!--<div class="choice-btn" onclick="xz(this)">-->
                <!--<span>五年</span>-->
                <!--<span class="price">10000元</span>-->
                <!--</div>-->
            </div>
            <div class="sub-btn" onclick="submit()">立即续约</div>
        </div>
    </div>
    <div class="other">
        <div class="other-title">
            <span class="line"></span>
            <span style="margin-left:0.05rem;margin-right:0.05rem;vertical-align: middle;">相关业务</span>
            <span class="line"></span>
        </div>
        <div class="other-box">
            <div class="other-box-top">
                <a href="">
                    <dl style="margin-left: 0.68rem;margin-right: 0.74rem;">
                        <dt><img src="images/detail-icon1.png" alt=""></dt>
                        <dd>系统搭建</dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/detail-icon2.png" alt=""></dt>
                        <dd>电商托管</dd>
                    </dl>
                </a>
            </div>
            <div class="other-box-bot">
                <a href="">
                    <dl style="margin-right:0.75rem;">
                        <dt><img src="images/detail-icon3.png" alt=""></dt>
                        <dd>定制开发</dd>
                    </dl>
                </a>
                <a href="">
                    <dl style="margin-right:0.75rem;">
                        <dt><img src="images/detail-icon4.png" alt=""></dt>
                        <dd>新媒体运营</dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/detail-icon5.png" alt=""></dt>
                        <dd>广告推广</dd>
                    </dl>
                </a>
            </div>
        </div>
    </div>

    <div class="buy-window">
        <div class="goods-info">
            <div class="img-box">
                <img id="myImage" src="images/goodsimg.png" alt="">
            </div>
            <span id="shuzi"></span>
        </div>
        <div class="click-buy-num">
            <span class="num-name">购买数量</span>
            <div class="add-machine">
                <div class="add-machine-left" onclick="minus()">－</div>
                <div id="goods_num" class="add-machine-center">1</div>
                <div class="add-machine-right" onclick="plus()">＋</div>
            </div>
        </div>
        <div class="close"></div>
        <div class="sub-btn" onclick="confirm()">确定</div>
    </div>
    <div class="opacity-gray"></div>
</div>
<input type="hidden" name="goods_ids" id="goods_ids" value="" />
</body>
<script>
    $('.public-left').click(function(){
        window.history.go(-1);
    })
    function xz(obj){
        $('.choice-btn').removeClass('active');
        $(obj).addClass('active').siblings().removeClass('active');
    }
    // 减
    function minus(){
        var num = $('.add-machine-center').html();
        num --;
        if(num < 1){
            num = 1;
        }
        $('.add-machine-center').html(num);
    }
    // 加
    function plus(){
        var num = $('.add-machine-center').html();
        num ++;
        $('.add-machine-center').html(num);
    }
    // 跳弹窗
    function submit(){
        var img = url()+$('#imgImg').html();
        $('#shuzi').html($('#spec .active .price').html());
        $('#myImage').attr('src',img);

        $('.buy-window').show(100);
        $('.opacity-gray').show();
    }
    // 关闭弹窗
    $('.close').click(function (e) {
        e.stopPropagation();
        $('.buy-window').css("display","none");
        $('.opacity-gray').hide();
        $('.add-machine-center').html(1);
    });
    // 确定跳转页面
    function confirm(){
        var goods_id = $("#goods_ids").val();
        var goods_num = $("#goods_num").html();
        var item_id = $("#spec .active .item_id").html();
        if (typeof(item_id)=="undefined" || item_id==0){
            alert("请选择规格，如果没有规格该产品已售完！");
        } else {
            sessionStorage.setItem("goods_id",goods_id); //商品ID，sesion储存，浏览器关闭（清空）
            sessionStorage.setItem("item_id",item_id); //规格ID，sesion储存，浏览器关闭（清空）
            sessionStorage.setItem("goods_num",goods_num); //商品数量，sesion储存，浏览器关闭（清空）
            window.location.href = 'confirmOrder.html';
        }
    }

</script>

<script>
    (function ($) {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    })
    (jQuery);
    $('#goods_ids').val($.getUrlParam('goods_id'));
    $(function(){
        //验证是否登陆
        var user_id = sessionStorage.getItem('userId');
        if (user_id == null) {
            alert('请先登录！');
            window.location.href = 'login.html';
        }
        //获取详情
        getGoodsDetails();

        //清空购买过的信息
        sessionStorage.removeItem("goods_id"); //商品ID，（清空）
        sessionStorage.removeItem("item_id"); //规格ID，（清空）
        sessionStorage.removeItem("goods_num"); //商品数量（清空）
        sessionStorage.removeItem("cid"); //商品数量（清空）
        sessionStorage.removeItem('favorablePrice'); //优惠券价格
        sessionStorage.removeItem('favorableId'); //优惠券ID
        sessionStorage.removeItem('cid'); //商品分类ID
    });
    //获取详情
    function getGoodsDetails(){
        var goods_ids = $("#goods_ids").val();
        $.ajax({
            url: url() + 'api/goods/goods_details',    //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "POST",   //请求方式
            data:{
                goods_id:goods_ids
            },
            success: function (data) {
                //请求成功时处理
                if(data.status==1){
                    // console.log(data.goods);
                    var str = data.goods.goods_content.replace(/p/g, 'li'); //转换字符串
                    $('#neiyong').html(str);
                    $('#goods_name').html(data.goods.goods_name);
                    $('#imgImg').html(data.goods.original_img);
                    var html1 = '';
                    $.each(data.spec_goods_price, function (i, item) {
                        html1+='<div class="choice-btn" onclick="xz(this)">';
                        html1+='<span class="item_id" style="display: none">'+item.item_id+'</span>';
                        html1+='<span>'+item.key_name+'</span>';
                        html1+='<span class="price">'+item.price+'元</span>';
                        html1+='</div>';
                    });
                    $('#spec').html(html1);
                    $('#spec div:first-of-type').addClass('active');

                } else {
                    $('#neiyong').html(data.msg);
                    console.log(data.msg);
                }
            }
        });
    }
</script>

</html> 






